<template>
  <div class="background-processer">
    <styled-uploader v-if="!value" @success="onImageUploaded">
    </styled-uploader>
    <image-processer v-else :value="value" @change="handleUploadUrl" :showDelete="true">
    </image-processer>
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue'
import ImageProcesser from './ImageProcesser.vue'
import StyledUploader from './StyledUploader.vue'
import type { RespUploadData } from '@/stores/modules/respTypes/type'


defineOptions({
  name: 'BackgroundProcesser'
})
const emit = defineEmits(['change'])
defineProps<{
  value: string,
  required: true
}>()


const onImageUploaded = (data: { resp: RespUploadData; file: File }) => {
  const { resp } = data
  message.success('上传成功')
  emit('change', resp.data.urls[0])
}
const handleUploadUrl = (url: string) => {
  emit('change', url)
}
</script>

<style></style>
